<template>
  <a-drawer
    title="详情信息"
    placement="right"
    :visible="visible"
    :width="800"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <template>
      <table border="1" width="750" align="center">
        <tr align="center">
          <th>热搜标题</th><td>{{ this.zhInfo.hotTitle }}</td>
        </tr>
        <tr align="center">
          <th>热搜详情</th><td>{{ this.zhInfo.hotDetail }}</td>
        </tr>
        <tr align="center">
          <th >热搜图片</th><td><img  v-bind:src="this.zhInfo.hotImgUrl"></img></td>
        </tr>
      </table>
    </template>
  </a-drawer>
</template>

<script>
  export default {
    name: 'ZhInfo',
    data () {
      return {
        visible: false,
        zhInfo: {}
      }
    },
    created () {
    },
    methods: {
      info (record) {
        this.visible = true
        this.zhInfo = record
      },
      onClose () {
        this.visible = false
      }
    }
  }
</script>
<style>
  input::-webkit-input-placeholder{
    text-align: center;
  }
  table{
    border: 2px solid rgba(236,236,236,0.84);
  }
  tr{
    height: 100px;
  }
  th{
    background: rgba(250,250,250,0.84);
    font-weight: 300;
    color: black;
  }
</style>
